<template>
	<view class="wanl-goods">
		<!-- 商品主图轮播 -->
		<view class="swiper-box" id="swiper">
			<swiper circular="true" autoplay="true" @change="swiperChange">
				<swiper-item v-for="(swiper, index) in goodsData.images" :key="index">
					<image :src="$wanlshop.oss(swiper, 400, 0)" mode="aspectFill" />
				</swiper-item>
			</swiper>
			<view class="indicator">{{ currentSwiper + 1 }}/{{ goodsData.images.length }}</view>
		</view>

		<view class="bg-white padding-lr padding-tb-sm">
			<view class="head flex justify-between align-center">
				<view class="text-price wanl-orange text-xxl margin-right-xs text-bold" style="color: #E31F1F;">
					{{ goodsData.price || '0.00' }}</view>
				<text style="font-size: 36rpx;" class="wlIcon-yiguanzhu1 text-red" v-if="iscollect == 1"
					@tap="follow"></text>
				<text style="color: #888888;font-size: 36rpx;" class="wlIcon-gerenguanzhu" v-if="iscollect == 2"
					@tap="follow"></text>
			</view>
			<!-- 标题，分享 -->
			<view class="title flex flex-direction">
				<view class="text-cut-2">
					{{ goodsData.title || '加载中...' }}
				</view>
				<text class="sub_title">
					{{goodsData.sub_title}}
				</text>
			</view>
		</view>

		<view class="bg-white margin-top-sm padding-lr evaluate">
			<view class="head flex justify-between align-center">
				<text>客户评价</text>
				<view class="more" @tap="onTag">
					<text>更多</text>
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view>
			<view class="wanl-gray text-sm text-center padding-bottom padding-top-lg"
				v-if="goodsData.evaluate_list.length == 0">暂无评论</view>
			<block v-for="(data,index) in goodsData.evaluate_list" :key="index">
				<view class="l" :key="index" v-if="index < 3">
					<view class="info flex justify-start align-center">
						<image :src="$wanlshop.oss(data.userinfo.avatar, 35, 35, 2, 'avatar')" mode="aspectFill"></image>
						<text>{{data.userinfo.nickname}}</text>
						<text>{{data.createtime_text}}</text>
						<uni-rate :max="5" :value="data.score" :size="12" color="#CCCCCC" active-color="#4CBD66" />
					</view>
					<view class="text text-cut-2"> {{data.content}} </view>
				</view>
			</block>
		</view>

		<!-- 分隔符 -->
		<wanl-divider width="60%" class="bg-white margin-top-sm" bgcolor="#fff">服务详情</wanl-divider>
		<!-- 产品详情 -->
		<view class="wanl-goods-content margin-bottom-sm bg-white padding-lr-sm" id="details"><rich-text
				:nodes="goodsData.content"></rich-text></view>
		<view class="WANL-MODAL text-sm" @touchmove.stop.prevent="moveHandle">
			<!-- 顶部 -->
			<view style="z-index: 99999;" class="cu-modal top-modal" :class="modalName == 'menu' ? 'show' : ''"
				@tap="modalName = null">
				<view class="wanl-modal-menu cu-dialog" @tap.stop=""><wanl-directs @change="modalName = null" /></view>
			</view>
			<!-- 规格 -->
			<view class="cu-modal bottom-modal" :class="modalName == 'option' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<view class="option wanl-modal">
						<view class="head text-left padding-bj solid-bottom">
							<view class="cu-avatar radius-bock margin-right"
								:style="{ backgroundImage: 'url(' + $wanlshop.oss(selectshop.thumbnail || goodsData.image, 100, 100) + ')' }">
							</view>

							<view>
								<view class="text-price wanl-orange text-xl margin-bottom-xs">{{ goodsData.price }}
								</view>
								<view class="wanl-gray margin-bottom-xs">
									已售 <text class="margin-lr-xs">{{ goodsData.sale }}</text> 件
								</view>
								<view class="text-sm">
									<view>
										<text class="margin-right-bj">已选择</text>
										<text class="margin-right-xs">{{ goodsData.title }}</text>
									</view>
								</view>
							</view>

							<view class="close wlIcon-31guanbi" @tap="hideModal"></view>
						</view>
						<!-- 1.0.8升级 -->
						<scroll-view scroll-y="true" :style="{maxHeight: wanlsys.screenHeight / 2 + 'px'}">
							<view class="opt text-left padding-bj solid-bottom" v-for="(value, spukey) in goodsData.spu"
								:key="value.id">
								<view class="text-df">{{ value.name }}</view>
								<view class="tag">
									<view class="cu-tag text-sm" v-for="(item, index) in value.item" :key="index"
										:class="[item.ishow ? '' : 'noactive', subIndex[spukey] == index ? 'active' : '']"
										@tap="skuClick(item, spukey, $event, index)">
										{{ $base64.decode(item.name) }}
									</view>
								</view>
							</view>
							<view class="number padding-bj">
								<view class="text-df">购买数量</view>
								<uni-number-box :min="1" :value="selectNum" :disabled="canCount"
									@change="changeNum"></uni-number-box>
							</view>
						</scroll-view>
						<view class="foot padding-lr-bj">
							<button v-if="isChoice" class="cu-btn bg-green round text-bold complete"
								@tap="ProcessingData">完成</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部 -->
		<view class="safeAreaBottom"></view>
		<view class="wanlian cu-bar tabbar shop foot">

			<view class="btn-group">
				<button class="cu-btn text-white bg-green" @tap="SubmitData('placeOrder')">立即下单</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				TabCur: 0,
				wanlsys: {},
				modalName: null, // 弹出层
				headerOpacity: 0, //不透明度
				currentSwiper: 0, // 轮播图右下角数字
				//产品数据
				goodsData: {
					images: [],
					evaluate_list: []
				},
				goodsId: '',
				subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				selectshop: {}, //存放最后选中的商品
				selectNum: 1, //选中数量
				isChoice: '', // 是否从选择进入
				scrollAnimation: 100, //分享滚动
				iscollect: 2,
			};
		},
		onNavigationBarButtonTap(e) {
			this.modalName = 'menu'
		},
		onLoad(option) {
			this.wanlsys = this.$wanlshop.wanlsys();
			this.goodsId = option.id
			this.loadData(option);
			if (this.$store.state.user.isLogin) {
				this.ifcollect(option);
			}
		},
		computed: {
			canCount() {
				return this.subIndex.some(item => item === -1);
			},
			...mapState(['cart', 'common'])
		},

		methods: {
			async ifcollect(option) {
				await uni.request({
					url: '/addons/accompany/api.collect/iscollect',
					method: 'POST',
					data: {
						type: 3,
						goods_id: option.id
					},
					success: res => {
						this.iscollect = res.data;
					}
				})
			},
			async loadData(option) {
				//加载商品
				await uni.request({
					url: `${this.$config.vehicleurl}/addons/accompany/api.Product/detail`,
					data: {
						id: option.id
					},
					success: res => {
						//详情正则
						res.data.content = res.data.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (
							match, capture) => {
							var img =
								`<img style="display: block; max-width: 100%;" src="${this.$wanlshop.oss(capture, 500, 0)}">`;
							return img;
						});

						this.goodsData = res.data;
					}
				});
			},
			// 关注 & 取消
			async follow() {
				await uni.request({
					url: '/addons/accompany/api.collect/add',
					method: 'POST',
					data: {
						type: 3,
						goods_id: this.goodsId
					},
					success: res => {
						this.iscollect = this.iscollect == 1 ? 2 : 1;
						this.$wanlshop.msg(`${this.iscollect == 1 ? '收藏成功' : '取消收藏成功'}`)
					}
				});
			},
			//商品规格修改数量
			changeNum(val) {
				this.selectNum = parseInt(val);
			},
			//轮播图指示器
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
			// 弹出层
			showModal(name) {
				this.isChoice = '';
				// 滚动下分享
				if (name == 'share' && this.modalName != 'share') {
					setTimeout(() => {
						this.scrollAnimation = 0;
					}, 300);
				}
				this.modalName = name;
			},
			// 关闭弹出层
			hideModal(name) {
				if (name) {
					this.showModal(name);
				} else {
					this.modalName = null;
				}
			},
			//禁止父元素滑动
			moveHandle() {},
			// 评论页
			onTag(tag) {
				this.$wanlshop.to(`/pages/medicalcare/homemaking/comment?id=${this.goodsId}&t=3`);

			},
			// 提交数据
			SubmitData(name, type) {
				if (type == 1) {
					this.isChoice = name;
					this.ProcessingData();
				} else {
					this.modalName = 'option';
					this.isChoice = name;
				}
			},
			ProcessingData() {
				if (this.isChoice == 'placeOrder') {
					// 提交订单
					this.$wanlshop.auth(
						`/pages/user/order/addRecord?type=accompany&id=${this.goodsId}&num=${this.selectNum}&address_id=0&is_home=${this.goodsData.is_home}`
						);

				} else {
					this.$wanlshop.msg('数据异常');
				}
				this.hideModal();
			}
		}
	};
</script>

<style lang="less">
	toast,
	uni-toast {
		z-index: 9999;
	}

	.cu-custom .cu-bar .search-form {
		background-color: #fff;
	}

	.cu-custom .cu-bar {
		background-color: #f3f3f3;
	}

	.cu-custom .bar-bg {
		background-color: rgba(243, 243, 243, 0.96);
	}

	.cu-custom .cu-bar {
		z-index: 99;
	}

	/* #ifdef MP */
	.cu-custom .cu-bar .search-form {
		margin: 0 0 0 25rpx;
	}

	/* #endif */

	.cu-custom .cu-bar .nav .cu-item {
		line-height: 70rpx;
		height: 70rpx;
	}

	.swiper-box {
		position: relative;
		width: 100%;
		height: 546rpx;
	}

	.swiper-box swiper {
		width: 100%;
		height: 546rpx;
	}

	.swiper-box swiper swiper-item image {
		width: 100%;
		height: 546rpx;
	}

	.swiper-box .indicator {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 25upx;
		height: 40upx;
		border-radius: 40upx;
		font-size: 22upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.action {
		color: #777777;
	}

	.title {
		padding-bottom: 20rpx;

		view {
			display: inline-block;
			font-size: 34rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #555555;
			line-height: 48rpx;
			margin-top: 26rpx;
		}

		.sub_title {
			display: inline-block;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #888888;
			line-height: 40rpx;
		}
	}

	.content {
		padding: 34rpx 30rpx 30rpx 30rpx;

		.titles {
			width: 690rpx;
			height: 58rpx;
			background: #4CBD66;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 58rpx;
			padding: 0 22rpx;
		}

		.text {
			padding: 20rpx 22rpx;
			width: 690rpx;
			height: 226rpx;
			background: #E9F4EB;
			border-radius: 0 0 20rpx 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #526456;
			line-height: 40rpx;
		}
	}

	.wanlian {
		background-color: #fff !important;
		box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.3);
	}

	.safeAreaBottom,
	.wanlian {
		height: calc(128rpx + env(safe-area-inset-bottom)) !important;
	}

	.evaluate {
		.head {
			padding-top: 16rpx;

			>text {
				display: inline-block;
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 48rpx;
			}

			.more {
				text {
					&:nth-child(1) {
						width: 48rpx;
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #AAAAAA;
						line-height: 28rpx;
					}

					&:nth-child(2) {
						color: #C8C8C8;
						font-size: 24rpx;
						font-weight: bold;
					}
				}
			}
		}

		.l {
			margin-top: 24rpx;
			padding-bottom: 38rpx;

			.info {
				image {
					width: 46rpx;
					height: 46rpx;
					border-radius: 50rpx;
				}

				text {
					display: inline-block;

					&:nth-child(2) {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #444444;
						line-height: 40rpx;
						margin-left: 18rpx;
					}

					&:nth-child(3) {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #888888;
						line-height: 34rpx;
						margin-left: 16rpx;
						margin-right: 46rpx;
					}
				}
			}

			.text {
				margin-top: 12rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #888888;
				line-height: 32rpx;
				padding-left: 64rpx;
			}
		}
	}

	.btn-group {
		/deep/ button {
			width: 690rpx !important;
			height: 76rpx !important;
			border-radius: 50rpx;
		}
	}
</style>